@use 'sass:color';

$bright-red: #e74c3c;
$bright-yellow: #f1c40f;
$status-info: #b1b8ba;
$status-error: $bright-red;
$status-warn: $bright-yellow;

// bottom console
#layout-console {
    height: 200px;
    border-top: 1px solid $border-primary;
    border-left: 1px solid $border-primary;

    .pcui-panel-header {
        overflow: hidden;
        align-items: center;

        > .pcui-panel-header-title {
            margin: 0 16px 0 0;
            max-width: fit-content;
        }

        > .divider {
            border: 0;
            border-left: 1px solid $border-primary;
            height: 100%;
        }

        > .count {
            font-size: 12px;
            text-align: center;
            margin: 0;
            padding: 0 8px;
            color: $status-info;
            background-color: $bcg-darkest;

            &:hover {
                color: #fff;
                cursor: pointer;
            }

            &.disabled {
                color: color.mix($text-darkest, $status-info, 50%);
                background-color: $bcg-darker;
            }

            &::before {        
                @extend .font-icon;

                text-align: center;
                margin-right: 5px;
            }

            &.info {
                &::before {
                    content: '\E400';
                }
            }

            &.warn {
                &::before {
                    content: '\E218';
                }

                &.found {
                    color: $status-warn;

                    &.disabled {
                        color: color.mix($text-darkest, $status-warn, 50%);
                    }
    
                    &:hover {
                        color: #fff;
                    }
                }
            }

            &.error {
                &::before {
                    content: '\E368';
                }

                &.found {
                    color: $status-error;

                    &.disabled {
                        color: color.mix($text-darkest, $status-error, 50%);
                    }
    
                    &:hover {
                        color: #fff;
                    }
                }
            }
        }

        > .jobs-count {
            font-size: 12px;
            color: #aaa;
            margin: 0 8px;
            pointer-events: none;

            &::before {   
                content: '\E304';
                
                @extend .font-icon;

                text-align: center;
                margin-right: 5px;
            }
        }
    
        > .jobs-progress {
            width: 128px;
            margin: 0 10px 0 0;
            display: none;
            transition: opacity 100ms, visibility 100ms;
    
            &.active {
                display: block;
            }
        }

        > .asset-auditor {
            border-radius: 0;
            margin: 0;
            height: 32px;

            &:hover {
                background-color: $bcg-darkest;
                box-shadow: none;
            }

            &.warn {
                color: $status-warn;
            }

            &.error {
                color: white;
                background-color: $status-error;

                &:hover {
                    background-color: color.mix(black, $status-error, 25%);
                }
            }
        }

        > .status {
            font-size: 12px;
            color: #aaa;
            border-left: 1px solid $border-primary;
            margin-left: auto;
            padding-left: 10px;
            padding-right: 5px;
            pointer-events: none;
            user-select: none;
    
            &.error {
                color: $status-error;
            }
        }
    }

    .console-header {
        padding: 0;
        margin: 0;
        border-top: 1px solid $border-primary;
        border-bottom: 1px solid $border-primary;
        background-color: $bcg-darker;

        .icon-button {
            padding: 8px 10px 6px;
            margin: 0;
            border-right: 1px solid $border-primary;

            &:hover {
                color: #fff;
                background-color: $bcg-darkest;
                cursor: pointer;
            }

            &::before {        
                @extend .font-icon;
        
                font-size: 14px;
                text-align: center;
            }

            &.clear {
                &::before {
                    content: '\E328';
                }
            }

            &.copy {
                &::before {
                    content: '\E126';
                }
            }

            &.history {
                &::before {
                    content: '\E209';
                }
            }
        }

        .filter-text {
            border: 0;
            border-radius: 0;
            margin: 4px;
            flex: 1;

            &::after {
                font-size: 12px;
            }
        }
    }

    .console-body {
        padding: 0;
        margin: 0;

        .console-item {
            font-size: 14px;
            border-bottom: 1px solid $bcg-dark;
            justify-content: space-between;
    
            &.error {
                .console-item-icon {
                    color: $status-error;
    
                    &::before {
                        content: '\E368';
                    }
                }

                .console-item-text {
                    color: $status-error;
                }
            }
    
            &.warn {
                .console-item-icon {
                    color: $status-warn;
    
                    &::before {
                        content: '\E218';
                    }
                }

                .console-item-text {
                    color: $status-warn;
                }
            }
    
            .console-item-icon {
                min-width: fit-content;

                &::before {
                    content: '\E400';
            
                    @extend .font-icon;
            
                    font-size: 14px;
                    text-align: center;
                }
            }

            .console-item-counter {
                color: $bcg-darker;
                background-color: #b1b8ba;
                font-weight: bold;
                font-size: 12px;
                text-align: center;
                height: 17px;
                min-width: 17px;
                padding: 2px 5px 0;
                margin: auto 0;
                border-radius: 10px;

                &.hidden {
                    display: none;
                }
            }

            .console-item-text {
                word-wrap: break-word;
                margin: 8px 0;
                margin-right: auto;

                &.link:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
    
            .console-item-time {
                font-size: 12px;
                text-align: right;
                min-width: fit-content;
                width: 50px;
                margin: auto 10px auto 5px;
            }
        }

        .console-show {
            display: flex;
            color: color.adjust($text-secondary, $alpha: -0.5);
            font-size: 12px;
            justify-content: center;
            margin: 10px;
        }
    }
}
